<template>
  <Drawer :closable="false" width="640" v-model="value">
    <zz-Label text="用户信息"></zz-Label>
    <p :style="pStyle"></p>
    <zz-Form
      title="基本信息"
      ref="zzForm1"
      :model="model"
      :formFontSize="'large'"
    >
      <Col span="24" v-if="model.avatarUrl">
        <FormItem label="用户头像" style="display: flex; align-items: center">
          <div class="demo-upload-list">
            <Image
              :src="model.avatarUrl"
              fit="cover"
              width="100%"
              height="100%"
            />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click="handleView"></Icon>
            </div>
          </div>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="用户姓名" prop="userName">
          <Input
            v-model="model.userName"
            :border="false"
            clearable
            @on-change="changeUserName"
          ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="用户编码" prop="userCode">
          <Input v-model="model.userCode" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="性别" prop="sex">
          <Select v-model="model.sex" transfer clearable>
            <Option
              v-for="item in sexList"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="身份证号" prop="idNumber">
          <Input v-model="model.idNumber" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="出生年月" prop="birthDay">
          <!-- <Input v-model="model.birthDay" :border="false" clearable> </Input> -->
          <DatePicker
            v-model="model.birthDay"
            type="date"
            @on-change="changeBirthDay"
          />
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="年龄" prop="age">
          <Input v-model="model.age" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="手机号" prop="telephone">
          <Input v-model="model.telephone" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="邮箱" prop="email">
          <Input
            v-model="model.email"
            :border="false"
            clearable
            style="width: 300px"
          ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="地址" prop="address">
          <Input v-model="model.address" :border="false" clearable></Input>
        </FormItem>
      </Col>
    </zz-Form>
    <!-- <Divider /> -->
    <p :style="pStyle"></p>
    <zz-Form
      title="教育信息"
      ref="zzForm1"
      :model="model"
      :formFontSize="'large'"
    >
      <Col span="12">
        <FormItem label="毕业院校" prop="school">
          <Input v-model="model.school" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="学历" prop="education">
          <Input v-model="model.education" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="专业" prop="major">
          <Input v-model="model.major" :border="false" clearable></Input>
        </FormItem>
      </Col>
    </zz-Form>
    <p :style="pStyle"></p>
    <zz-Form
      title="组织信息"
      ref="zzForm1"
      :model="model"
      :formFontSize="'large'"
    >
      <Col span="12">
        <FormItem label="公司" prop="companyCode">
          <Select v-model="model.companyCode" transfer clearable>
            <Option
              v-for="item in companyList"
              :value="item.companyCode"
              :key="item.companyCode"
            >
              {{ item.companyName }}
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="部门" prop="departmentName">
          <Input
            v-model="model.departmentName"
            :border="false"
            clearable
          ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="职务" prop="jobPost">
          <Input v-model="model.jobPost" :border="false" clearable></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem label="职称" prop="jobTitle">
          <Input v-model="model.jobTitle" :border="false" clearable></Input>
        </FormItem>
      </Col>
    </zz-Form>
    <div class="demo-drawer-footer">
      <Button size="default" @click="close">关闭</Button>
      <Button class="ml-10" type="primary" size="default" @click="modify"
        >修改</Button
      >
    </div>
    <ImagePreview v-model="previewVisible" :preview-list="[model.avatarUrl]" />
  </Drawer>
</template>

<script>
export default {
  name: 'editUser',
  emits: ['query'],
  data() {
    return {
      value: false,
      userId: '',
      model: {
        userName: '',
        userCode: '',
        sex: '',
        idNumber: '',
        birthDay: '',
        age: '',
        telephone: '',
        email: '',
        address: '',
        school: '',
        education: '',
        major: '',
        companyName: '',
        departmentName: '',
        jobPost: '',
        jobTitle: '',
      },
      // list
      sexList: [],
      companyList: [],
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px',
      },
      // 头像文件
      ava: {
        previewUrl: '',
        externalUrl: '',
        fileName: '',
        minioFileName: '',
      },
      previewVisible: false,
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.init()
        this.queryById()
      }
    },
  },
  methods: {
    init() {
      this.sexList = [
        {
          value: '1',
          label: '男',
        },
        {
          value: '0',
          label: '女',
        },
      ]
      this.companyList = [
        { companyCode: 'dhc', companyName: '信华信技术股份有限公司' },
        { companyCode: 'huawei', companyName: '华为股份有限公司' },
      ]
    },
    changeBirthDay(val) {
      console.log(val)
    },
    async queryById() {
      if (this.userId) {
        let res = await this.$API.userManagement.user.queryById.get(this.userId)
        if (res.code === '01') {
          this.model = res.data
          this.model.birthDay = this.$XEUtils.toDateString(
            res.data.birthDay,
            'yyyy-MM-dd'
          )
        }
      }
    },
    // 更改姓名
    changeUserName() {
      console.log(this.model.userName)
    },
    // 修改
    async modify() {
      let params = this.model
      let res = await this.$API.userManagement.user.modify.post(params)
      if (res.code === '01') {
        this.$Message.success('修改成功')
        this.$emit('query')
        this.close()
      } else {
        this.$Message.error('修改失败')
      }
    },
    // 关闭
    close() {
      this.value = false
      this.reset()
    },
    // 重置
    reset() {
      this.model = {}
    },
    handleView() {
      this.previewVisible = true
    },
  },
}
</script>

<style lang="less" scoped>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}

:deep(.ivu-select .ivu-select-selection) {
  border: none;
  box-shadow: none;
}
:deep(.ivu-input) {
  border: none;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-left: -80px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
